<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_图片插入</title>
</head>
<body>
<!--右键选中.html文件"open in" "Explorer"-->
<!--相对路径：从当前要插入资源的html出发，去找目标-->
<!--目标与html再同一级目录：直接写目标全名！
目标在html的兄弟/子目录下：先写目录名再写目标
目标再html的上层目录：先写../回到上级，再写目标-->
<img src="1.jpg" alt="">
<img src="img/2.png" alt="">
<img src="../3.png" alt="">
<!--alt用来设置图片无法成功 加载时的预设替换文字-->
<img src="asd" alt="图片不见了"></img>
<!--width和height用来设置图片的高度和宽带
图片失真：图片的宽高比例不对
图片本身有大小和宽高比，只设置宽高的其中一个属性，另外一个会同时改变-->


<img src="img/zly.jpg" width="200" height="200"></img>
<img src="img/zly.jpg" width="200" title="这是一张美女照片"></img>
<img src="img/zly.jpg" height="200"></img>
<img src="https://img10.360buyimg.com/jdcms/s480x480_jfs/t1/304792/19/14134/84230/685f87d2F04029bf8/20bf78aba91cebe8.jpg.avif" alt="">
</body>
</html>